<template>
  <div>
    <el-container>
      <el-main>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="我的课程" name="myCourse">
            <el-card class="operate-container" shadow="never">
              <el-form :inline="true" class="demo-form-inline">
                <!-- 课程名 -->
                <el-form-item label="课程名">
                  <el-input v-model="searchObj.title" placeholder="课程名"/>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
                <el-button type="default" @click="resetData()">清空</el-button>
              </el-form>
            </el-card>

            <div v-if="reset">

            <el-row>
              <el-col :span="6" v-for="item in list" :key="item.id" >
                <el-card :body-style="{ padding: '50px' }">
                  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                  <div style="padding: 14px;">
<!--                    课程名-->
                    <span>{{ item.courseName }}</span>
                    <div class="bottom clearfix">
                      <span>{{ item.teacherName }}</span>
                      <el-button type="text" class="button">操作按钮</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已结束课程" name="endCourse">

          </el-tab-pane>

        </el-tabs>
      </el-main>
    </el-container>
    <!-- 分页组件 -->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      style="padding: 30px 0; text-align: center;"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="changePageSize"
      @current-change="changeCurrentPage"
    />
  </div>
</template>

<script>
import courseApi from '@/api/course'
export default {
  name: 'Index',
  data() {
    return {
      activeName:'myCourse',
      searchObj: {}, // 查询条件
      list: [], // 课程列表
      reset:false,
      total: 0, // 总记录数
      page: 1, // 页码
      limit: 10, // 每页记录数
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    fetchData() {
      courseApi.getPageList(this.page, this.limit, this.searchObj).then(response => {
        this.list = response.data.records
        this.total = response.data.totalCount
      })
    },
    // 重置表单
    resetData() {
      this.searchObj = {}
      this.fetchData()
    },
    // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
    changePageSize(size) {
      this.limit = size
      this.fetchData()
    },
    // 改变页码，page：回调参数，表示当前选中的“页码”
    changeCurrentPage(page) {
      this.page = page
      this.fetchData()
    },
  },
  created() {
    this.fetchData()
  },
  watch:{
    tableData:function(){
      this.$nextTick(function(){
        /*现在数据已经渲染完毕*/
        //console.log(this.tabledata);
        this.reset=true;
      })
    },
  }

}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
